<template>
	<!-- 利用轮播制作手势滑动 -->
	<swiper class="home-swiper" :current="activeIndex" @change="change">
		<!-- 有几个标签就循环出几个item -->
	<swiper-item v-for="(item ,index) in tab" :key="index" class="swiper-item">
		<list-item :list="listCatchData[index]" :load="load[index]" @loadmore="loadmore"></list-item>
	</swiper-item>
</swiper>
</template>

<script>
	import listItem from './list-item'
	export default {
		components: {
			listItem
		},
		props: {
			tab: {
				type: Array,
				default () {
					return []
				}
			},
			activeIndex: {
				type: Number,
				default: 0
			}
		},
		name: "list",
		data() {
			return {
				list: [],
				//提前缓存 避免数据闪动
				listCatchData: {},
				load: {},
				pageSize: 10,
				// tab:{}
				// tab:[{id:1,name:"cc"},{id:2,name:"cc"},{id:3,name:"cc"},{id:4,name:"cc"},
				// {id:1,name:"cc"},{id:1,name:"cc"},{id:1,name:"cc"},]
			};
		},
		watch: {
			tab(newVal) {
				if (newVal.length === 0) return
				this.listCatchData = {}
				this.load = {}
				this.getList(this.activeIndex)
			}
		},
		// onload在页面中使用 created在组件中写
		created() {
			// this.getList(0)
			uni.$on('update_article', () => {
				this.listCatchData = {}
				this.load = {}
				this.getList(this.activeIndex)
			})
		},
		methods: {
			loadmore() {
			if (this.load[this.activeIndex].loading === 'noMore') return
						this.load[this.activeIndex].page++
						this.getList(this.activeIndex)

			},
			change(e) {
				const {
					current
				} = e.detail
				// console.log("change",current);
				// 然后在再这个地方也就是每次都触发change事件的时候会触发getList（name）这个函数 
				//而每次触发时候都有对应的新的当前的name值，需要将这个值传出去
				// this.getList(current);
				this.$emit('change', current)
				// 判断数据是否已经加载过 只有数据不存在 or 长度为0的时候才回去请求数据
				if (!this.listCatchData[current] || this.listCatchData[current].length === 0) {
					this.getList(current)
				}
			},
			// 要做将页面和上方选项卡对应的联动效果
			// 首先将name传递给getList才能知道要获取那些列表
			getList(current) {
				if (!this.load[current]) {
					this.load[current] = {
						page: 1,
						loading: 'loading'
					}
				}
				this.$api.get_list({
					name: this.tab[current].name,
					page: this.load[current].page,
					pageSize: this.pageSize
				}).then(res => {
					console.log(res)
					const {data} = res
					// this.list = data
					if (data.length === 0) {
						let oldLoad = {}
						oldLoad.loading = 'noMore'
						oldLoad.page = this.load[current].page
						this.$set(this.load, current, oldLoad)
						// 强制渲染
						this.$forceUpdate()
						return
					}
					let oldList = this.listCatchData[current] || []
					//将新的数据放旧的数据中 ...用于扩展数组
					oldList.push(...data)

					// 查看可以获取到什么
					// console.log('请求数据：',data);
					// this.listCatchData[current] = data;
					// this.$set() 通知页面发生变化需要刷新 包含三个值 一个是需要改变的值，修改第几项，实际修改的内容
					//数据的懒加载 只有需要的才请求
					this.$set(this.listCatchData, current, oldList)
				})
			}
		}
	}
</script>

<style lang="scss">
	.home-swiper {
		height: 100%;

		.swiper-item {
			height: 100%;
			overflow: hidden;

			.list-scroll {
				height: 100%;
			}
		}

	}
</style>
